<script src="__PUBLIC__/js/vue-2.5.22-min.js"></script>
<div id="paipanwrap" v-cloak>
  
</div>
<script>
  Vue.component('paipanitem', {
    props: {
      items: {
        type: Object,
        defautl: null
      },
      index: String | Number
    },
    computed: {
      small() {
        let len = 0
        this.topList.forEach(val => {
          val.forEach(v => {
            len++
          })
        })
        if (len > 8) {
          return 'small'
        } else {
          return ''
        }
      },
      num() {
        return this.items.xx.join()
      },
      className() {
        return "pi" + this.index
      },
      topList() {
        let obj = {}
        for (let key in this.items.zhuxing) {
          obj[key] = this.items.zhuxing[key].filter(item => item && !/\s/g.test(item)).map(item => [item.split('')[
            0] + item.split('')[1], item.split('')[2], item.split('')[3]])
        }
        let arr = [obj.red, obj.purple, obj.blue]

        return arr
      }
    },
    template: `<div class="paipanitem" :class="className">
  <div class="pi-top" :class="small">
    <div class="pi-top-item" v-for="unit in topList[0]" :key="unit.two">
      <div class="two-words red">{{unit[0]}}</div>
      <div class="one-word" v-if="unit[1]">{{unit[1]}}</div>
      <div class="one-word-bg" v-if="unit[2]">{{unit[2]}}</div>
    </div>
    <div class="pi-top-item" v-for="unit in topList[1]" :key="unit.two">
      <div class="two-words purple">{{unit[0]}}</div>
      <div class="one-word" v-if="unit[1]">{{unit[1]}}</div>
      <div class="one-word-bg" v-if="unit[2]">{{unit[2]}}</div>
    </div>
    <div class="pi-top-item" v-for="unit in topList[2]" :key="unit.two">
      <div class="two-words blue">{{unit[0]}}</div>
      <div class="one-word" v-if="unit[1]">{{unit[1]}}</div>
      <div class="one-word-bg" v-if="unit[2]">{{unit[2]}}</div>
    </div>
  </div>
  <div class="pi-middle">
    <div class="num-wrap">
      <div class="row">{{num}}</div>
    </div>
    <div class="pim-right">
      <div class="sg" v-if="items.sg">{{items.sg}}</div>
      <div class="sg hide" v-if="!items.sg"></div>
      <div class="yj">{{items.fourxing[3]}}</div>
    </div>
  </div>
  <div class="pi-bottom">
    <div class="left-three">
      <div class="lt-row green">{{items.fourxing[0]}}</div>
      <div class="lt-row">{{items.fourxing[1]}}</div>
      <div class="lt-row">{{items.fourxing[2]}}</div>
    </div>
    <div class="middle-row">
      <div class="num-row">
        <div class="num-row-tt">{{items.dx}}</div>
      </div>
      <div class="guan-row">
        <div class="guan-tip hide">管资质</div>
        <div class="family">{{items.gongwei}}</div>
      </div>
    </div>
    <div class="right-one">{{items.time}}</div>
  </div>
</div>
`
  })


  Vue.component('paipan', {
    props: {
      hidec: Boolean,
      paipanProps: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        showOne: null,
        paipan: JSON.parse(JSON.stringify(this.paipanProps)),
        time: 0
      }
    },
    computed: {
      addOver() {
        return this.time >= 11
      },
      deaddOver() {
        return this.time <= 0
      },
      hideCanvas() {
        // showCard弹出隐藏canvas
        // 分享框弹出隐藏canv弹出隐藏canvas
        return this.hidec || this.showOne
      },
      dayunList() {
        let arr = []
        if (this.paipan) {
          this.paipan.dayun.age.forEach((val, index) => {
            arr[index] = [
              this.paipan.dayun.ssArr[index],
              this.paipan.dayun.gz[index],
              val
            ]
          })
        }

        return arr
      },
      listData() {
        let arr = []
        // this.paipan.data
        if (this.paipan) {
          for (let key in this.paipan.data) {
            arr[key - 1] = Object.assign({
                index: [key - 1]
              },
              this.paipan.data[key]
            )
          }
        }

        return arr
      },
      topList() {
        if (this.listData.length) {
          return this.listData.slice(0, 4)
        }
      },
      leftList() {
        if (this.listData.length) {
          return this.listData.slice(4, 6)
        }
      },
      rightList() {
        if (this.listData.length) {
          return this.listData.slice(6, 8)
        }
      },
      bottomList() {
        if (this.listData.length) {
          return this.listData.slice(8, 12)
        }
      }
      //...mapGetters([''])
    },

    created() {
      this.tarr = [
        '子',
        '丑',
        '寅',
        '卯',
        '辰',
        '巳',
        '午',
        '未',
        '申',
        '酉',
        '戌',
        '亥'
      ]
      this.time = this.calcTime()
    },
    mounted() {
      // this.drawLine([[1,12],[6,3],[6,12],[3,12]])
    },
    watch: {
      showOne: {
        handler() {
          this.$emit('showshow', !!this.showOne)
          if (!this.showOne) {
            // 画线
            // this.drawLine([[1,7],[2,7],[2,8]])
          }
        },
        deep: true
      }
    },
    methods: {
      preventMover() {
        console.log('preventMover')
      },
      calcTime() {
        let time = 0
        if (this.paipan) {
          this.tarr.forEach((val, index) => {
            if (new RegExp(val).test(this.paipan.yinli)) {
              time = index
            }
          })
        }

        return time
      },
      
    },
    template: `<div class="paipan">
      <div class="top">
        <paipanitem index="0"  :items="paipan.data['1']"></paipanitem>
        <paipanitem index="1"  :items="paipan.data['2']"></paipanitem>
        <paipanitem index="2"  :items="paipan.data['3']"></paipanitem>
        <paipanitem index="3"  :items="paipan.data['4']"></paipanitem>
      </div>
      <div class="middle">
        <div class="left">
          <paipanitem index="4"  :items="paipan.data['5']"></paipanitem>
          <paipanitem index="5"  :items="paipan.data['6']"></paipanitem>
        </div>
        <div class="user">
          <div class="user-info-wrap">
            <div class="title">知命·紫微斗数</div>
            <div class="user-detail" v-if="paipan">
              <div class="name-row">
                <div class="nr-left">姓名：{{paipan.username}}</div>
                <div class="nr-right">{{paipan.sex}}&nbsp;&nbsp;{{paipan.mingju}}</div>
              </div>
              <div class="ud-row">钟表时间：{{paipan.yangli}}</div>
              <div class="ud-row">农历：{{paipan.yinli}}</div>
              <div class="ud-row">
                {{paipan.mingzhu}}:{{paipan.minggong}}&nbsp;&nbsp;{{paipan.shenzhu}}:{{paipan.shengong}}&nbsp;&nbsp;子斗:{{paipan.zidou}}
              </div>
              <div class="qz-row">
                <div class="qz-row-tlt">乾造</div>
                <div class="qz-row-tt-wrap">
                  <div class="qz-row-tt" v-for="item in paipan.sizhu" :key="item">{{item}}</div>
                </div>
              </div>
              <div class="ud-row">命主{{paipan.dayun.name}}</div>
              <div class="bg-row">
                <div class="bg-row-item" v-for="item in dayunList" :key="item[2]">
                  <div class="row1">{{item[1]}}</div>
                  <div class="row2">{{item[0]}}</div>
                  <div class="row3">{{item[2]}}</div>
                </div>
              </div>
              <div class="ud-row xixs">
                <div class="xix">自化图示</div>
                <div class="green">→禄</div>
                <div class="purse">→权</div>
                <div class="blue">→科</div>
                <div class="red">→忌</div>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <paipanitem index="6"  :items="paipan.data['7']"></paipanitem>
          <paipanitem index="7"  :items="paipan.data['8']"></paipanitem>
        </div>
      </div>
      <div class="bottom">
        <paipanitem index="8"  :items="paipan.data['9']"></paipanitem>
        <paipanitem index="9"  :items="paipan.data['10']"></paipanitem>
        <paipanitem index="10"  :items="paipan.data['11']"></paipanitem>
        <paipanitem index="11"  :items="paipan.data['12']"></paipanitem>
      </div>
    </div>
    `
  })
  let vm = new Vue({
    el: '#paipanwrap',
    data:{
      result:null,
    },
    template:"<paipan v-if='result' :paipanProps='result'></paipan>",
    created() {
      let _this = this
      $.ajax({
        type: "GET",
        url: "https://hy.yixueqm.com/zhiming/index.php/Home-InterfaceMP-ZWmingpan",
        data: {
          birthday: '0-<!--{$Think.cookie.zymd}-->-0',
          sex: '<!--{$Think.cookie.zsex}-->',
          sid:  1
          
          // sid:106
        }, 
        dataType: "json",
        success: function(data){
          console.log('data with ziwei data')
          console.log(data)
          _this.result = data
        }
      });
    }
  })
</script>

<style>

  [v-cloak] {
    display: none !important;
  }
  .paipan {
    position: relative;
    width: 7rem;
    margin: 0 auto;
    /* background-color: #fff; */
  }

  .paipan .top,
  .paipan .bottom,
  .paipan .middle {
    display: flex;
    width: 7rem;
    margin: 0 auto;
    justify-content: space-between;
  }

  .paipan .left,
  .paipan .right {
    display: flex;
    flex-direction: column;
  }

  .paipan .user {
    width: 3.5rem;
    position: relative;
  }

  .paipan .user .user-info-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0.1rem;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 0.2rem;
  }

  .paipan .user .user-info-wrap .title {
    font-weight: 600;
    font-size: 0.32rem;
    color: #333;
  }

  .paipan .user .user-info-wrap .user-detail {
    width: 100%;
    margin-top: 0.1rem;
  }

  .paipan .user .user-info-wrap .user-detail .name-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    line-height: 0.3rem;
  }

  .paipan .user .user-info-wrap .user-detail .ud-row {
    text-align-last: justify;
    line-height: 0.3rem;
  }

  .paipan .user .user-info-wrap .user-detail .xixs {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.1rem;
  }

  .paipan .user .user-info-wrap .user-detail .xixs .green {
    color: #007e00;
    padding-left: 0.1rem;
    padding-right: 0.1rem;
  }

  .paipan .user .user-info-wrap .user-detail .xixs .purse {
    color: #7f007f;
    padding-left: 0.1rem;
    padding-right: 0.1rem;
  }

  .paipan .user .user-info-wrap .user-detail .xixs .blue {
    color: #0a79ec;
    padding-left: 0.1rem;
    padding-right: 0.1rem;
  }

  .paipan .user .user-info-wrap .user-detail .xixs .red {
    color: #fd4536;
    padding-left: 0.1rem;
    padding-right: 0.1rem;
  }

  .paipan .user .user-info-wrap .user-detail .change-btns {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 0.5rem;
  }

  .paipan .user .user-info-wrap .user-detail .change-btns .btn {
    width: 1.08rem;
    height: 0.4rem;
    background-image: linear-gradient(180deg, #fff7ca 0%, #ffd187 100%);
    border-radius: 0.04rem;
    border: solid 0 0.01rem #c1a06d;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.24rem;
    color: #333;
  }

  .paipan .user .user-info-wrap .user-detail .change-btns .btn.diss {
    border: none;
    background-image: none;
    background-color: #eee;
  }

  .paipan .user .user-info-wrap .user-detail .qz-row {
    display: flex;
    align-items: flex-start;
  }

  .paipan .user .user-info-wrap .user-detail .qz-row .qz-row-tlt {
    width: 0.7rem;
    text-align: left;
  }

  .paipan .user .user-info-wrap .user-detail .qz-row .qz-row-tt-wrap {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }

  .paipan .user .user-info-wrap .user-detail .qz-row .qz-row-tt-wrap .qz-row-tt {
    width: 0.3rem;
    font-weight: 600;
    height: 0.5rem;
    writing-mode: horizontal-tb;
  }

  .paipan .user .user-info-wrap .user-detail .bg-row {
    display: flex;
    justify-content: space-between;
  }

  .paipan .user .user-info-wrap .user-detail .bg-row .bg-row-item {
    flex: none;
    max-width: 0.3rem;
    text-align: center;
  }

  .paipan .user .user-info-wrap .user-detail .bg-row .bg-row-item .row1 {
    width: 0.3rem;
    height: 0.55rem;
    writing-mode: horizontal-tb;
  }

  .paipan .user .user-info-wrap .user-detail .bg-row .bg-row-item .row2 {
    font-size: 0.14rem;
  }

  .paipan .user .user-info-wrap .user-detail .bg-row .bg-row-item .row3 {
    font-size: 0.12rem;
  }

  .paipan .pi0,
  .paipan .pi1,
  .paipan .pi2,
  .paipan .pi3,
  .paipan .pi8,
  .paipan .pi9,
  .paipan .pi10,
  .paipan .pi11 {
    border-top: 0.01rem solid #525252;
  }

  .paipan .pi0,
  .paipan .pi4,
  .paipan .pi5,
  .paipan .pi8,
  .paipan .pi3,
  .paipan .pi6,
  .paipan .pi7,
  .paipan .pi11 {
    border-right: 0.01rem solid #525252;
  }

  .paipan .pi0,
  .paipan .pi1,
  .paipan .pi2,
  .paipan .pi3,
  .paipan .pi4,
  .paipan .pi6,
  .paipan .pi8,
  .paipan .pi9,
  .paipan .pi10,
  .paipan .pi11 {
    border-bottom: 0.01rem solid #525252;
  }

  .paipan .pi0,
  .paipan .pi4,
  .paipan .pi5,
  .paipan .pi8,
  .paipan .pi3,
  .paipan .pi6,
  .paipan .pi7,
  .paipan .pi11,
  .paipan .pi2,
  .paipan .pi10 {
    border-left: 0.01rem solid #525252;
  }

  .paipan .pi0 .paipanitem,
  .paipan .pi8 .paipanitem {
    width: 1.74rem;
  }

  .paipan .show {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 500;
    display: flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .paipan .show img.close-imgs {
    position: fixed;
    width: 0.5rem;
    height: 0.5rem;
    top: 50%;
    left: 50%;
    margin-left: 2.1rem;
    margin-top: -3.7rem;
  }

  .paipan .show .paipanitem {
    transform: scale(2.5);
    background-color: #fffaf1;
    border: none;
    flex: none;
    padding: 0.2rem;
    box-sizing: content-box;
  }

  .paipanitem {
    width: 1.75rem;
    flex: none;
    padding: 0.05rem;
    box-sizing: border-box;
  }

  .paipanitem .hide {
    visibility: hidden;
  }

  .paipanitem .pi-top {
    display: flex;
    width: 1.75rem;
  }

  .paipanitem .pi-top .pi-top-item {
    display: flex;
    flex: auto;
    flex-direction: column;
    max-width: 0.22rem;
    height: 1.1rem;
  }

  .paipanitem .pi-top .pi-top-item .two-words {
    font-size: 0.18rem;
    -webkit-write-mode: horizontal-tb;
  }

  .paipanitem .pi-top .pi-top-item .red {
    color: #b9362e;
  }

  .paipanitem .pi-top .pi-top-item .purple {
    color: #862e8d;
  }

  .paipanitem .pi-top .pi-top-item .blue {
    color: #214f99;
  }

  .paipanitem .pi-top .pi-top-item .one-word {
    font-size: 0.16rem;
  }

  .paipanitem .pi-top .pi-top-item .one-word-bg {
    font-size: 0.18rem;
    display: flex;
    width: 100%;
    height: .3rem;
    line-height: .3rem;
    justify-content: center;
    align-items: center;
    background-color: #e9513f;
    border-radius: .06rem;
    color: #fff;
  }

  .paipanitem .pi-top.small .pi-top-item .two-words {
    font-size: 0.12rem;
  }

  .paipanitem .pi-top.small .pi-top-item .one-word {
    font-size: 0.1rem;
  }

  .paipanitem .pi-top.small .pi-top-item .one-word-bg {
    font-size: 0.12rem;
  }

  .paipanitem .pi-middle {
    display: flex;
    padding-left: 0.1rem;
    padding-right: 0.1rem;
    box-sizing: border-box;
    justify-content: space-between;
  }

  .paipanitem .pi-middle .num-wrap {
    width: 1.12rem;
    height: 0.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .paipanitem .pi-middle .num-wrap .row {
    font-size: 0.16rem;
    width: 1.12rem;
    word-break: break-all;
  }

  .paipanitem .pi-middle .pim-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 0.35rem;
  }

  .paipanitem .pi-middle .pim-right .sg {
    border: 0.01rem solid #f00;
    color: #f00;
    border-radius: 0.05rem;
    width: 0.25rem;
    -webkit-write-mode: horizontal-tb;
    text-align: center;
    line-height: 0.25rem;
    height: 0.5rem;
    font-size: 0.16rem;
  }

  .paipanitem .pi-middle .pim-right .yj {
    width: 0.35rem;
    font-size: 0.16rem;
    text-align: right;
  }

  .paipanitem .pi-bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 0.12rem;
  }

  .paipanitem .pi-bottom .left-three .lt-row {
    font-size: 0.16rem;
    
    text-align: left;
  }
  .paipanitem .pi-bottom .left-three{
    flex:none;
    width: .32rem;
  }
  .paipanitem .pi-bottom .left-three .green {
    color: #69b3b6;
  }

  .paipanitem .pi-bottom .middle-row {
    flex: auto;
  }

  .paipanitem .pi-bottom .middle-row .num-row {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 0.36rem;
  }

  .paipanitem .pi-bottom .middle-row .num-row .num-row-tt {
    font-size: 0.18rem;
  }

  .paipanitem .pi-bottom .middle-row .num-row .num-row-br {
    font-size: 0.18rem;
    border-radius: 0.06rem;
    border: 0.01rem solid #333;
    padding: 0 0.02rem;
  }

  .paipanitem .pi-bottom .middle-row .guan-row {
    display: flex;
    height: 0.2rem;
    align-items: flex-end;
  }

  .paipanitem .pi-bottom .middle-row .guan-row .guan-tip {
    font-size: 0.16rem;
    flex: auto;
    width: 0.55rem;
    text-align: center;
  }

  .paipanitem .pi-bottom .middle-row .guan-row .family {
    font-size: 0.18rem;
    width: .4rem;
    margin: 0 0.06rem;
    color: #f00;
  }

  .paipanitem .pi-bottom .right-one {
    font-size: 0.2rem;
    width: 0.3rem;
    -webkit-write-mode: horizontal-tb;
  }
</style>